<script setup lang="ts">
import { defineEmits, defineProps, ref, watch } from "vue"

// 单个多选框选项类型定义（移除disabled属性）
export interface CheckboxOption {
  label: string // 选项显示文本
  value: string | number // 选项对应的值（唯一标识）
}

// Props 定义（移除disabled相关配置）
const props = defineProps({
  // 分组标题
  groupTitle: {
    type: String,
    default: ""
  },
  // 选项列表（移除disabled字段）
  options: {
    type: Array as () => CheckboxOption[],
    required: true,
    validator: (value: CheckboxOption[]) => {
      // 校验选项值唯一
      const values = value.map(item => item.value)
      return new Set(values).size === values.length
    }
  },
  // 绑定的选中值（支持 v-model）
  modelValue: {
    type: Array as () => (string | number)[],
    default: () => []
  }
})

// Emits 定义
const emit = defineEmits(["update:modelValue"])

// 内部选中值
const innerCheckedValues = ref<(string | number)[]>(props.modelValue)

// 监听父组件传入的值变化
watch(() => props.modelValue, (newVal) => {
  innerCheckedValues.value = newVal
}, { immediate: true })

// 监听内部值变化，通知父组件
watch(innerCheckedValues, (newVal) => {
  emit("update:modelValue", newVal)
})
</script>

<template>
  <div class="multi-checkbox-group">
    <div class="group-header" v-if="groupTitle">
      <span class="title">{{ groupTitle }}</span>
    </div>

    <!-- 多选框组 -->
    <el-checkbox-group
      v-model="innerCheckedValues"
      class="checkbox-group"
    >
      <div class="checkbox-item" v-for="opt in options" :key="opt.value">
        <el-checkbox
          :value="opt.value"
        >
          {{ opt.label }}
        </el-checkbox>
      </div>
    </el-checkbox-group>
  </div>
</template>

<style scoped lang="scss">
.multi-checkbox-group {
  margin-bottom: 24px;
  width: 100%;

  .group-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;

    .title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }

  .checkbox-group {
    width: 100%;
    padding: 8px 0;
  }

  // 每个选项单独占一行
  .checkbox-item {
    display: block;
    margin-bottom: 12px;
    line-height: 1.5; // 优化长文本行高

    // 处理长文本换行
    .el-checkbox {
      width: 100%;
      white-space: normal; // 允许文本换行
      cursor: pointer;
      color: #666;
      font-size: 14px;

      // 优化复选框与文本间距
      .el-checkbox__label {
        margin-left: 8px;
        word-break: break-word; // 长单词强制换行
      }
    }
  }
}
</style>
